<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {computed, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {editdanju, getdanju, getXiaoshoudan} from "@/request/api";
import {timestampToDate} from "@/utils";
import {getCurrentInstance} from 'vue'

const {proxy} = getCurrentInstance()
const orderId = ref(0);//订单id
const orderDetail = ref({});//订单id
const documentList = ref([]);//列表
const userinfo = ref(uni.getStorageSync('userinfo'));//订单id
const disabled = ref(false);//

onLoad((query) => {
  orderId.value = query.id;
  disabled.value = !!query.disabled;
  getDocument();
  getInfo();
})
const getInfo = () => {
  getXiaoshoudan({
    id: orderId.value
  }).then(res => {
    orderDetail.value = {...res.data};
  })
}
const issss = ref(true);
//获取单据
const getDocument = () => {
  getdanju({
    id: orderId.value,
  }).then(res => {
    issss.value = !!Number(res.data.goods[0].num1);
    documentList.value = res.data.goods;
  })
}
const diffPirce = computed(() => (item) => {
  return item.num * item.price
})
const totalPrice2 = computed(() => {
  let price = 0;
  documentList.value.forEach(item => {
    if (issss.value) {
      price += Number(item.num1);
    } else {
      price += Number(item.num1);

    }
  })
  return price.toFixed(2);
})
const totalPrice1 = computed(() => {
  let price = 0;
  documentList.value.forEach(item => {
    if (issss.value) {
      price += Number(item.num);
    } else {
      price += Number(item.num);

    }
  })
  return price.toFixed(2);
})
const totalPrice = computed(() => {
  let price = 0;
  documentList.value.forEach(item => {
    if (item.num1) {
      price += Number(item.total1);
    } else {
      price += Number(item.total);

    }
  })
  return price.toFixed(2);
})
const handleSubmit = () => {
  for (const item of documentList.value) {
    if (!item.num) return uni.showToast({
      title: `请填写${item.name}的数量`,
      icon: 'none'
    });

  }
  console.log(documentList.value)
  editdanju({
    id: orderId.value,
    goods: documentList.value
  }).then(res => {
    uni.showToast({
      title: '操作成功',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000)
  })
}
//数量彼岸花
const numChange = (e, index) => {
  console.log(e)
  let item = documentList.value[index];
  documentList.value[index].total = Number(e.detail.value) * Number(item.price) - Number(item.dingjin);
}
const dingjin = (e, index) => {
  let item = documentList.value[index];
  if (item.num1){
   documentList.value[index].total1 = Number(item.num1) * Number(item.price1) - Number(item.dingjin);
  }else documentList.value[index].total = Number(item.num) * Number(item.price) - Number(item.dingjin);
}
const numChange2 = (e, index) => {
  console.log(e)
  let item = documentList.value[index];
  documentList.value[index].total1 = Number(e.detail.value) * Number(item.price1) - Number(item.dingjin);
}
const create = () => {
  uni.showLoading({
    title: '生成中'
  })
  proxy.createSelectorQuery().select('#view').node().exec(res => {
    const node = res[0].node
    node.takeSnapshot({
      type: 'file',
      format: 'png',
      success: (res) => {
        uni.hideLoading();
        uni.showShareImageMenu({
          style: 'v2',
          path: res.tempFilePath,
        })
      },
      fail(res) {
        console.log("takeSnapshot fail:", res)
      }
    })

  })
}
</script>
<template>
  <view class="document-page">
    <u-navbar placeholder title="单据"></u-navbar>
    <!--    <view class="tip">请横屏查看单据</view>-->
    <scroll-view type="list" scroll-x class="scroll-y" style="position: relative;">

      <view ref="documentRef" class="document">
        <snapshot id="view" class="intro">

          <text class="title">工商服务业统一收款收据</text>
          <view class="container">
            <view class="member">
              <text>客户名称：{{ orderDetail.mobile }}</text>
              <text>日期：{{ timestampToDate(orderDetail.createtime) }}</text>
            </view>
            <view class="table">
              <view class="header">
                <view class="th1">产品名称</view>
                <view class="th2">包装规格</view>
                <view  class="th3">产品吨数</view>
                <view  class="th4">产品吨价</view>
                <view  class="th3">产品箱数</view>
                <view class="th4">产品箱价</view>
                <view class="th5">金额</view>
                <view class="th5">定金</view>
                <view class="th6">备注</view>
              </view>
              <view class="header row" v-for="(item,index) of documentList" :key="index">
                <view class="th1">
                  <input type="text" v-model="item.name">
                </view>
                <view class="th2">
                  <input  type="number" v-model="item.baozhuangguige">
                </view>
                <view class="th3">
                  <input v-if="!item.num1" @input="numChange($event,index)" type="number" v-model="item.num">

                </view>
                <view class="th4">
                  <input v-if="!item.num1" type="digit" v-model="item.price">
                </view>
                <view  class="th5">
                  <input v-if="item.num1" @input="numChange2($event,index)" type="digit" v-model="item.num1">

                </view>
                <view  class="th5">
                  <input v-if="item.num1" type="digit" v-model="item.price1">
                </view>
                <view v-if="!item.num1" class="th5">
                  <input type="digit" v-model="item.total">

                </view>
                <view v-if="item.num1" class="th5">
                  <input type="digit" v-model="item.total1">

                </view>
                <view class="th5">
                  <input @input="dingjin($event,index)" type="text" v-model="item.dingjin">

                </view>
                <view class="th6">
                  <input type="text" v-model="item.remark">

                </view>
              </view>
              <view class="header row">
                <view class="th1">
                </view>
                <view class="th2">
                </view>
                <view  class="th3">
<!--            {{totalPrice1}}-->
                </view>
                <view  class="th4">
                </view>
                <view  class="th5">
<!--          {{totalPrice2}}-->
                </view>
                <view  class="th5">
                </view>
                <view  class="th5">
                  {{ totalPrice }}
                </view>

                <view class="th5">

                </view>
                <view class="th6">
                </view>
              </view>

            </view>
            <view class="member">
              <text>填写人：{{ orderDetail.sc_name || '未知' }}</text>
              <text>复核人：{{ orderDetail.zg_name }}</text>
              <!--              <text>总价：{{ totalPrice }}</text>-->
            </view>
          </view>
        </snapshot>
      </view>


    </scroll-view>
    <view v-if="!disabled" class="submit" @click="handleSubmit">确认提交</view>
    <view v-else class="submit" @click="create">保存收据</view>
    <view class="safe-area"></view>
  </view>
</template>


<style scoped lang="scss">
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.document-page {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  align-items: center;


  .submit {
    width: 597rpx;
    height: 96rpx;
    background: #3563FF;
    border-radius: 48rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 36rpx;
  }

  .document {
    //width: 3900rpx;
    //height: 1000rpx;
    padding: 70rpx 60rpx;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    //transform: rotate(-90deg) translate(5.5rem, 20vw);

    .table {
      margin-top: 25rpx;
      background: #FFFFFF;
      border: 1px solid #666666;

      input {
        width: 100%;
        height: 100%;
        text-align: center;
      }

      .th1 {
        width: 320rpx;
        height: 76rpx;
      }

      .th2 {
        width: 320rpx;
        height: 76rpx;
      }

      .th3 {
        width: 190rpx;
        height: 76rpx;
      }

      .th4 {
        width: 190rpx;
        height: 76rpx;
      }

      .th5 {
        width: 190rpx;
        height: 76rpx;
      }

      .th6 {
        width: 190rpx;
        height: 76rpx;
      }

      .header {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #666;

        &.row {
          view {
            font-weight: 400;
          }
        }

        &:last-child {
          border-bottom: unset;
        }

        > view {
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          font-size: 26rpx;
          color: #222222;
          border-right: 1rpx solid #666;

          &:last-child {
            border-right: unset;
          }
        }
      }
    }

    .member {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      align-items: center;

      text {
        font-weight: 400;

        font-size: 26rpx;
        color: #222222;
      }
    }

    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      text-align: center;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    //align-items: center;
    height: 300vh;
    padding: 30rpx 0 30rpx 0;
    background-color: #fff;

  }

  .tip {
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    background-color: rgb(245, 245, 245);
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    height: 88rpx;
  }
}
</style>
